<template>
    <div id="ywStatistics">
        <height-chart :title="title">
            <div id="ywStatistics_echartBOX"></div>
        </height-chart>
    </div>
</template>

<script>
    import heightChart from 'components/content/heightChart/heightChart'

    import echarts from 'echarts'

    import {getRepairsType} from "../../../network/home";
    export default {
        name: "ywStatistics",
        data() {
            return {
                timer:null
            }
        },
        props: {
            title: {
                type: String,
                default: "统计类目"
            }
        },
        components: {
            heightChart
        },

        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('左上关闭')
            }
        },
        methods: {
            setEchart() {
                var myColor = [
                    '#FFC020',
                    '#2EC0F9',
                    '#FF9302',
                    '#87C500',
                    '#007DF3',
                ];
                var option = {
                    grid: {
                        top: '15%',
                        right: '3%',
                        left: '8%',
                        bottom: '12%'
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['接听数', '咨询数', '派单数 ', '到场数','完成数', '接收数', '到场数', '处理数'],
                        axisLabel: {
                            margin: 20,
                            color: '#ffffff',
                            textStyle: {
                                fontSize: 12
                            },
                        },
                    }],
                    yAxis: [{
                        axisLabel: {
                            color: '#ffffff',
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#272456'
                            }
                        }
                    }],
                    series: [{
                        type: 'bar',
                        data: [150, 250, 400, 350,150, 250, 400, 350],
                        barWidth: '40px',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'white',
                                        fontSize: 12
                                    },
                                },
                                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                //     offset: 0,
                                //     color: '#5DB1F9' // 0% 处的颜色
                                // }, {
                                //     offset: 1,
                                //     color: '#0260BD' // 100% 处的颜色
                                // }], false),
                                color: function (params) {
                                    var num = myColor.length;
                                    return myColor[params.dataIndex]
                                },
                                shadowBlur: 4,
                            }
                        },

                    }]
                };

                getRepairsType().then(res => {
                    if(res.code=='200'){
                        // console.log(res.data)
                        // console.log(option.xAxis[0].data)
                        option.xAxis[0].data=res.data.name
                        // console.log(option.series[0].data)
                        option.series[0].data=res.data.value

                        echarts.init(document.getElementById('ywStatistics_echartBOX')).setOption(option)
                    }
                });
            }
        }
    }
</script>

<style scoped>
    #ywStatistics_echartBOX {
        width: 100%;
        height: 404px;
    }
</style>
